<!DOCTYPE html>
<html>
<head>
    {include file="layout:_meta" /}
    {include file="layout:_tree" /}
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="title"  value="{:isset($list.title)?$list.title:''}" disabled class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所有权限</label>
        <div class="layui-input-block">
            <div style="overflow: auto;">
                <ul id="tree" class="dtree" data-id="0"></ul>
            </div>
            <input id="rules" type="hidden" name="rules"  value="{:isset($list.rules)?$list.rules:''}">
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="hidden" name="id" value="{:isset($list['id'])?$list['id']:''}">
        <input type="hidden" name="state" value="{:isset($list['state'])?$list['state']:''}">
        <input type="button" lay-submit lay-filter="addEdit" id="addEdit" value="确认">
    </div>
</div>
{include file="layout:_footer" /}
<script>
    layui.config({
        base: '__static__/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','dtree','form'], function(){
        var form = layui.form,$ = layui.$,dtree = layui.dtree;

        var Tree = dtree.render({
            elem: "#tree",
            url: "{:url('role/access')}",
            menubar:true,
            menubarTips : {
                group: ["moveDown", "moveUp", "refresh", "checkAll", "unCheckAll", "invertAll", "searchNode"], //按钮组
            },
            method: "get",  //默认为post
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            skin: "layui",  // laySimple主题风格
            checkbar:true,  //开启复选框
            checkbarType: "p-casc",
            done: function(res, $ul, first){
                dtree.chooseDataInit("tree","{$list['rules']}");    // 初始化选中
            }
        });

        //节点点击事件
        dtree.on("node(tree)", function(obj){
            var nodeId = obj.param.nodeId;
            Tree.clickNodeCheckbar(nodeId);  // 点击节点选中复选框
        });

        //节点选中
        dtree.on("chooseDone('tree')" ,function(obj){
            params = obj.checkbarParams; // 选中的所有复选框的参数
            var ids = [];
            for(var key in params){
                var param = params[key];
                ids.push(param.nodeId);
            }

            $("#rules").val(ids.join(","));  // 选中的所有复选框的参数
        });

    })
</script>
</body>
</html>